<template>
	<view class="content">
		<van-tabs :active="active" @change='tabsChange'>
			<van-tab title="全部">
				<view class="order">

					<view class="list" v-for="(item,index) in list" :key="index">
						<view class="state">{{item.status | status }}</view>
						<view class="goods">

							<dl v-for="(orderItemList,index2) in item.orderItemList" :key="index2">
								<dt>
									<image :src="orderItemList.imgUrl"></image>
								</dt>
								<dd>
									<h2>{{orderItemList.pName}}</h2>
									<span>{{orderItemList.userIntended}}</span>
									<em>x{{orderItemList.num}}</em>
								</dd>
							</dl>
						</view>
						<view class="text">共{{item.orderItemList.length}}件商品</view>
						<view class="but">
							<span @click="navigateto(`../order/order-details?orderId=${item.id}`)">查看详情</span>
						</view>
					</view>

				</view>
			</van-tab>
			<van-tab title="已预定">
				<view class="order">
				
					<view class="list" v-for="(item,index) in list" :key="index">
						<view class="state">{{item.status | status }}</view>
						<view class="goods">
				
							<dl v-for="(orderItemList,index2) in item.orderItemList" :key="index2">
								<dt>
									<image :src="orderItemList.imgUrl"></image>
								</dt>
								<dd>
									<h2>{{orderItemList.pName}}</h2>
									<span></span>
									<em>x{{orderItemList.num}}</em>
								</dd>
							</dl>
						</view>
						<view class="text">共{{item.orderItemList.length}}件商品</view>
						<view class="but">
							<span @click="navigateto(`../order/order-details?orderId=${item.id}`)">查看详情</span>
						</view>
					</view>
				
				</view>
			</van-tab>
			<van-tab title="已拒绝">
				<view class="order">
				
					<view class="list" v-for="(item,index) in list" :key="index">
						<view class="state">{{item.status | status }}</view>
						<view class="goods">
				
							<dl v-for="(orderItemList,index2) in item.orderItemList" :key="index2">
								<dt>
									<image :src="orderItemList.imgUrl"></image>
								</dt>
								<dd>
									<h2>{{orderItemList.pName}}</h2>
									<span>{{orderItemList.userIntended}}</span>
									<em>x{{orderItemList.num}}</em>
								</dd>
							</dl>
						</view>
						<view class="text">共{{item.orderItemList.length}}件商品</view>
						<view class="but">
							<span @click="navigateto(`../order/order-details?orderId=${item.id}`)">查看详情</span>
						</view>
					</view>
				
				</view>
			</van-tab>
			<van-tab title="已完成">
				<view class="order">
				
					<view class="list" v-for="(item,index) in list" :key="index">
						<view class="state complete">{{item.status | status }}</view>
						<view class="goods">
				
							<dl v-for="(orderItemList,index2) in item.orderItemList" :key="index2">
								<dt>
									<image :src="orderItemList.imgUrl"></image>
								</dt>
								<dd>
									<h2>{{orderItemList.pName}}</h2>
									<span>{{orderItemList.userIntended}}</span>
									<em>x{{orderItemList.num}}</em>
								</dd>
							</dl>
						</view>
						<view class="text">共{{item.orderItemList.length}}件商品</view>
						<view class="but">
							<span @click="navigateto(`../order/order-details?orderId=${item.id}`)">查看详情</span>
						</view>
					</view>
				
				</view>
			</van-tab>
		</van-tabs>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				lastId:'',
				active: 0,
				// 订单状态: 0-审核中, 1-已受理(已预定), 2-已完成, 3-已拒绝
				status:'',
				list: []
			}
		},
		onReachBottom(){
			console.log('onReachBottom')
			this.query(true)
		},
		onLoad(e){
			if(e.active){
				this.active=Number(e.active)
				this.transformation(this.active)
			}
			this.query()
		},
		filters:{
			// 0 表示审核中， 1表示已受理，2受理完成
			status(val) {
				let text = ''
				switch (val) {
					case 0:
				  text = '审核中'
				  break
					case 1:
						text = '已受理'
						break
					case 2:
						text = '受理完成'
						break
				}
				return text
			}
		},
		methods: {
			tabsChange(e){
				this.lastId=''
				this.transformation(e.detail.index)
				this.query()
			},
			transformation(index){
				switch (index) {
					case 0:
					this.status = ''
				  break
					case 1:
						this.status = 1
						break
					case 2:
						this.status = 3
						break
					case 3:
						this.status = 2
						break
				}
			},
			query(onReachBottom) {
				this.$api({
					url: `/order/list`,
					data:{
						id:this.lastId,
						status:this.status
					},
					method: "GET",
				}).then(res => {
					this.list = res.list
					this.lastId = this.list[this.list.length-1].id
				},res=>{
					if(!onReachBottom){
						this.list = []
						this.lastId = ''
					}
				})
			},
			navigateto(url) {
				wx.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding-bottom: calc(env(safe-area-inset-bottom));
	}

	.nav {
		width: 100%;
		display: flex;

		li {
			flex: 1;
			font-size: 28rpx;
			line-height: 100rpx;
			height: 100rpx;
			text-align: center;
			color: #666;

			&.now {
				color: #dc261b;
				font-weight: bold;

				text {
					border-bottom: 4rpx solid #dc261b;
				}
			}

			text {
				padding-bottom: 8rpx;
			}
		}
	}

	.order {
		padding: 20rpx 20rpx 20rpx;

		.list {
			background: #fff;
			border-radius: 16rpx;
			padding: 30rpx;
			margin: 20rpx 0 0;

			&:first-of-type {
				margin: 0;
			}

			.state {
				font-size: 28rpx;
				&.complete {
					color: #999;
				}
			}

			.goods {

				// padding: 30rpx 0 0;
				dl {
					display: flex;
					align-items: center;
					padding: 30rpx 0;

					dt {
						width: 152rpx;

						image {
							width: 152rpx;
							height: 152rpx;
						}
					}

					dd {
						flex: 1;
						position: relative;
						padding-left: 24rpx;

						h2 {
							height: 80rpx;
							font-size: 28rpx;
							overflow: hidden;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
						}

						span,
						em {
							display: block;
							font-size: 24rpx;
							margin: 10rpx 0 0;
							color: #999;
						}

						em {
							position: absolute;
							bottom: 0;
							right: 0;
						}
					}
				}
			}

			.text {
				font-size: 28rpx;
				text-align: right;
				border-top: 2rpx solid #d8d8d8;
				padding-top: 30rpx;
			}

			.but {
				display: flex;
				justify-content: flex-end;
				margin-top: 26rpx;

				span {
					width: 168rpx;
					height: 56rpx;
					line-height: 56rpx;
					font-size: 28rpx;
					text-align: center;
					border: 2rpx solid #d8d8d8;
					color: #999;
					border-radius: 50rpx;
					margin-left: 30rpx;
				}
			}
		}
	}

	::v-deep {
		.van-tabs__scroll {
			background: none !important;
		}

	}
</style>
